<!-- eslint-disable prefer-promise-reject-errors -->
<script setup lang="ts">
import type { FormInstance } from 'ant-design-vue';

import type { PropType } from 'vue';

import { computed, nextTick, reactive, ref, watch } from 'vue';

import { message, Modal } from 'ant-design-vue';

import { orderReturns } from '#/api/hm/saleOrder';

// 定义产品信息接口
interface ProductInfo {
  productId: string;
  productName: string;
  totalSold: number;
  pickedQty: number;
  unpickedQty: number;
  unitPrice: number;
  alreadyReturnedPickedQty: number;
  alreadyReturnedUnpickedQty: number;
}

// 定义赠品信息接口 (用于订单数据)
interface OrderGiftInfo {
  giftId: string;
  giftName: string;
  totalGiven: number;
  pickedQty: number;
  unpickedQty: number;
  alreadyReturnedPickedQty: number;
  alreadyReturnedUnpickedQty: number;
}

// 定义表单中每个赠品的退货状态接口
interface FormGiftReturnInfo {
  returnThisGift: boolean;
  pickedQty: number;
  unpickedQty: number;
}

// 定义传递给弹窗的订单数据结构
interface OrderReturnDataType {
  saleId: number | string;
  productA: ProductInfo;
  gifts: OrderGiftInfo[];
  paidAmount: number;
}

// 定义组件的 props
const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  orderDataInput: {
    type: Object as PropType<null | OrderReturnDataType>,
    default: null,
  },
});

// 定义组件的 emits
const emit = defineEmits(['update:visible', 'success']);

const saleOrderRefundAdd = async (data: any) => {
  console.log('正在提交退货申请数据:', data);
  await orderReturns(data).then((res) => {
    message.success('退货提交成功');
  });
};

const modalVisible = ref(false);
const loading = ref(false);
const formRef = ref<FormInstance>();
const errorMessage = ref('');

// 计算属性：获取当前订单数据
const orderData = computed<OrderReturnDataType>(() => {
  // 打印传入的 prop 以便调试
  console.log(
    'SaleOrderReturnModal - props.orderDataInput:',
    props.orderDataInput,
  );

  const source = props.orderDataInput || {};
  let clonedData: OrderReturnDataType;
  try {
    clonedData = JSON.parse(JSON.stringify(source));
    console.log('SaleOrderReturnModal - JSON.parse(JSON.stringify()) 成功');
    return clonedData;
  } catch (jsonError) {
    console.error(
      '深度拷贝 orderData (JSON.parse/stringify) 也失败:',
      jsonError,
      '\n原始数据:',
      source,
    );
    message.error('订单数据处理失败，请检查控制台获取更多信息。');
    return {};
  }
});

// 表单初始状态工厂函数
const initialFormState = () => {
  // 注意：这里不再需要 initialReturnedGiftQuantities 局部变量
  return {
    mainProductReturnType: 'none',
    mainReturnPickedQty: 0,
    mainReturnUnpickedQty: 0,
    applyForRefund: true,
    manualRefundAmount: null as null | number,
    returnAnyGift: false,
    returnedGiftQuantities: {} as Record<string, FormGiftReturnInfo>,
    reasonCode: undefined as string | undefined,
    description: '',
  };
};

const formState = reactive(initialFormState());

// --- 计算各种可退数量 ---
const availableMainPickedQty = computed(() =>
  Math.max(
    orderData.value.productA.pickedQty -
      orderData.value.productA.alreadyReturnedPickedQty,
    0,
  ),
);
const availableMainUnpickedQty = computed(() =>
  Math.max(
    orderData.value.productA.unpickedQty -
      orderData.value.productA.alreadyReturnedUnpickedQty,
    0,
  ),
);

const getAvailableGiftPickedQty = (giftId: string): number => {
  const gift = orderData.value.gifts.find((g) => g.giftId === giftId);
  if (!gift) return 0;
  return gift.pickedQty - gift.alreadyReturnedPickedQty;
};
const getAvailableGiftUnpickedQty = (giftId: string): number => {
  const gift = orderData.value.gifts.find((g) => g.giftId === giftId);
  if (!gift) return 0;
  return gift.unpickedQty - gift.alreadyReturnedUnpickedQty;
};

// 监听弹窗显示状态
watch(
  () => props.visible,
  async (val) => {
    modalVisible.value = val;
    if (val) {
      const baseState = initialFormState(); // 获取干净的初始状态
      Object.assign(formState, {
        // 重置 formState
        ...baseState,
        // returnedGiftQuantities 将在下面根据 orderData 重新填充
        returnedGiftQuantities: {},
      });
      errorMessage.value = '';

      // 基于当前的 orderData 初始化 formState.returnedGiftQuantities
      const initialGiftQuantitiesForCurrentOrder: Record<
        string,
        FormGiftReturnInfo
      > = {};
      if (orderData.value && orderData.value.gifts) {
        orderData.value.gifts.forEach((gift) => {
          initialGiftQuantitiesForCurrentOrder[gift.giftId] = {
            returnThisGift: false,
            pickedQty: 0,
            unpickedQty: 0,
          };
        });
      }
      formState.returnedGiftQuantities = initialGiftQuantitiesForCurrentOrder;

      await nextTick();
      formRef.value?.clearValidate();
    }
  },
);

// 主产品退货方式改变
const onMainProductReturnTypeChange = async () => {
  formState.mainReturnPickedQty = 0;
  formState.mainReturnUnpickedQty = 0;
  if (formState.mainProductReturnType === 'all') {
    formState.mainReturnPickedQty = availableMainPickedQty.value;
    formState.mainReturnUnpickedQty = availableMainUnpickedQty.value;
  }
  await nextTick();
  formRef.value?.clearValidate([
    'mainReturnPickedQty',
    'mainReturnUnpickedQty',
  ]);
};

const onToggleReturnThisGift = async (giftId: string) => {
  // 确保 formState.returnedGiftQuantities[giftId] 存在
  if (!formState.returnedGiftQuantities[giftId]) {
    // 理论上在 watch props.visible 中已经初始化，但作为防御性编程
    formState.returnedGiftQuantities[giftId] = {
      returnThisGift: true,
      pickedQty: 0,
      unpickedQty: 0,
    };
  }

  if (!formState.returnedGiftQuantities[giftId].returnThisGift) {
    formState.returnedGiftQuantities[giftId].pickedQty = 0;
    formState.returnedGiftQuantities[giftId].unpickedQty = 0;
    await nextTick();
    if (formRef.value) {
      // 构建正确的字段路径进行校验清除
      formRef.value.clearValidate([
        `returnedGiftQuantities.${giftId}.pickedQty`,
        `returnedGiftQuantities.${giftId}.unpickedQty`,
      ]);
    }
  }
};

const finalRefundAmount = computed(() => {
  if (!formState.applyForRefund) {
    return 0;
  }
  const manualAmount = formState.manualRefundAmount ?? 0;
  return Math.min(manualAmount, orderData.value.paidAmount);
});

// --- 表单校验规则 ---
const validateMainPickedQty = (_rule: any, currentVal = 0) => {
  if (formState.mainProductReturnType !== 'partial') return Promise.resolve();
  if (currentVal < 0) return Promise.reject('数量不能为负');
  if (currentVal > availableMainPickedQty.value)
    return Promise.reject(
      `不能超过可退的已提货数量 (${availableMainPickedQty.value})`,
    );
  return Promise.resolve();
};
const validateMainUnpickedQty = (_rule: any, currentVal = 0) => {
  if (formState.mainProductReturnType !== 'partial') return Promise.resolve();
  if (currentVal < 0) return Promise.reject('数量不能为负');
  if (currentVal > availableMainUnpickedQty.value)
    return Promise.reject(
      `不能超过可退的未提货数量 (${availableMainUnpickedQty.value})`,
    );
  return Promise.resolve();
};

const validateGiftItemPickedQty =
  (giftId: string) =>
  (_rule: any, currentVal = 0) => {
    const giftState = formState.returnedGiftQuantities[giftId];
    if (!formState.returnAnyGift || !giftState || !giftState.returnThisGift)
      return Promise.resolve();

    const maxQty = getAvailableGiftPickedQty(giftId);
    if (currentVal < 0) return Promise.reject('数量不能为负');
    if (currentVal > maxQty)
      return Promise.reject(`不能超过该赠品可退的已提货数量 (${maxQty})`);
    return Promise.resolve();
  };
const validateGiftItemUnpickedQty =
  (giftId: string) =>
  (_rule: any, currentVal = 0) => {
    const giftState = formState.returnedGiftQuantities[giftId];
    if (!formState.returnAnyGift || !giftState || !giftState.returnThisGift)
      return Promise.resolve();

    const maxQty = getAvailableGiftUnpickedQty(giftId);
    if (currentVal < 0) return Promise.reject('数量不能为负');
    if (currentVal > maxQty)
      return Promise.reject(`不能超过该赠品可退的未提货数量 (${maxQty})`);
    return Promise.resolve();
  };

const validateManualRefundAmount = (
  _rule: any,
  value: null | number | undefined,
) => {
  if (!formState.applyForRefund) return Promise.resolve();
  if (value === null || value === undefined) return Promise.resolve();
  if (value < 0) return Promise.reject('退款金额不能为负');
  if (value > orderData.value.paidAmount)
    return Promise.reject(
      `退款金额不能超过已回款 (${orderData.value.paidAmount.toFixed(2)})`,
    );
  return Promise.resolve();
};

const handleCancel = () => {
  modalVisible.value = false;
  emit('update:visible', false);
};

// 处理弹窗确认 (提交退货申请) - 已修改以包含二次确认
const handleOk = async () => {
  errorMessage.value = '';
  if (!formRef.value) {
    errorMessage.value = '表单引用未就绪。';
    return;
  }

  try {
    // 1. 执行表单校验
    await formRef.value.validate();

    // 2. 执行业务逻辑校验 (在显示确认框之前)
    const currentFinalRefundAmount = finalRefundAmount.value;

    if (
      formState.applyForRefund &&
      currentFinalRefundAmount > orderData.value.paidAmount
    ) {
      message.error(
        `退款金额 (${currentFinalRefundAmount.toFixed(2)}) 超出已回款 (${orderData.value.paidAmount.toFixed(2)})`,
      );
      return; // 校验失败，不显示确认框
    }

    let hasAnyReturnItem = false;
    const totalMainReturnQty =
      (formState.mainReturnPickedQty || 0) +
      (formState.mainReturnUnpickedQty || 0);
    if (formState.mainProductReturnType !== 'none' && totalMainReturnQty > 0) {
      hasAnyReturnItem = true;
    }
    if (
      formState.mainProductReturnType !== 'none' &&
      totalMainReturnQty === 0
    ) {
      message.error('主产品已选择退货方式，但退货数量总和为0。');
      return; // 校验失败
    }

    let activeReturnedGiftsCount = 0;
    if (formState.returnAnyGift) {
      for (const giftId in formState.returnedGiftQuantities) {
        if (
          Object.prototype.hasOwnProperty.call(
            formState.returnedGiftQuantities,
            giftId,
          )
        ) {
          const giftReturnInfo = formState.returnedGiftQuantities[giftId];
          if (giftReturnInfo.returnThisGift) {
            const totalGiftItemReturnQty =
              (giftReturnInfo.pickedQty || 0) +
              (giftReturnInfo.unpickedQty || 0);
            if (totalGiftItemReturnQty > 0) {
              hasAnyReturnItem = true;
              activeReturnedGiftsCount++;
            }
          }
        }
      }
    }

    if (
      !hasAnyReturnItem &&
      (!formState.applyForRefund || currentFinalRefundAmount === 0)
    ) {
      message.error('未选择任何退货项目，且未申请有效退款。');
      return; // 校验失败
    }

    // 3. 如果所有初步校验通过，显示二次确认弹窗
    Modal.confirm({
      title: '确认提交',
      content:
        '您确定要提交此退货退款申请吗？一旦提交，相关信息将按当前填写内容处理。',
      okText: '确认提交',
      cancelText: '我再想想',
      centered: true,
      onOk: async () => {
        // 用户点击确认后，执行实际的提交操作
        try {
          loading.value = true; // 开始API调用加载状态

          // 构建 payload (可以在这里重新构建，或者如果之前已经构建好且无变化，则直接使用)
          const activeReturnedGiftsPayload = [];
          if (formState.returnAnyGift) {
            for (const giftId in formState.returnedGiftQuantities) {
              if (
                Object.prototype.hasOwnProperty.call(
                  formState.returnedGiftQuantities,
                  giftId,
                )
              ) {
                const giftReturnInfo = formState.returnedGiftQuantities[giftId];
                if (giftReturnInfo && giftReturnInfo.returnThisGift) {
                  const totalGiftItemReturnQty =
                    (giftReturnInfo.pickedQty || 0) +
                    (giftReturnInfo.unpickedQty || 0);
                  if (totalGiftItemReturnQty > 0) {
                    activeReturnedGiftsPayload.push({
                      giftProductId: giftId,
                      giftReturnPickedQty: giftReturnInfo.pickedQty || 0,
                      giftReturnUnpickedQty: giftReturnInfo.unpickedQty || 0,
                    });
                  }
                }
              }
            }
          }

          const payload: any = {
            saleId: orderData.value.saleId,
            refundType: 2,
            applyForRefund: formState.applyForRefund,
            refundAmount: currentFinalRefundAmount,
            saleProductId:
              formState.mainProductReturnType === 'none'
                ? undefined
                : orderData.value.productA.productId,
            mainProductReturnPickedQty:
              formState.mainProductReturnType === 'none'
                ? 0
                : formState.mainReturnPickedQty || 0,
            mainProductReturnUnpickedQty:
              formState.mainProductReturnType === 'none'
                ? 0
                : formState.mainReturnUnpickedQty || 0,
            mainProductUnitPrice:
              formState.mainProductReturnType === 'none'
                ? undefined
                : orderData.value.productA.unitPrice.toFixed(2),
            returnedGifts:
              activeReturnedGiftsPayload.length > 0
                ? activeReturnedGiftsPayload
                : undefined,
            reasonCode: formState.reasonCode,
            description: formState.description,
          };

          if (!payload.returnedGifts) {
            delete payload.returnedGifts;
          }

          await saleOrderRefundAdd(payload); // 实际API调用
          emit('success'); // 通知父组件成功
          handleCancel(); // 关闭主弹窗
        } catch (apiError: any) {
          // 处理API调用期间的错误
          errorMessage.value = `提交API请求失败: ${apiError?.message || '未知错误'}`;
          console.error('API提交失败详情:', apiError);
        } finally {
          loading.value = false; // 结束API调用加载状态
        }
      },
      onCancel: () => {
        console.log('用户取消了提交申请。');
      },
    });
  } catch (formValidationError: any) {
    // 处理表单校验失败 (formRef.value.validate() 抛出的错误)
    if (formValidationError?.errorFields) {
      console.warn('表单校验未通过:', formValidationError.errorFields);
      // 通常 Ant Design Vue 会在字段旁显示错误，这里可以不额外弹 message.error
    } else {
      // 其他意外的校验流程错误
      errorMessage.value = `表单处理时发生错误: ${formValidationError?.message || '请检查表单内容'}`;
      console.error('表单校验或处理错误:', formValidationError);
    }
  }
  // 注意：顶层的 loading.value 不应在这里设置为 false，因为它现在由 Modal.confirm 的 onOk 控制
};
</script>
<template>
  <a-modal
    v-model:open="modalVisible"
    title="订单退货与退款"
    width="850px"
    :confirm-loading="loading"
    @ok="handleOk"
    @cancel="handleCancel"
    wrap-class-name="sale-order-return-modal"
    :destroy-on-close="true"
  >
    <a-form
      :model="formState"
      ref="formRef"
      layout="vertical"
      v-if="modalVisible"
    >
      <a-alert
        v-if="errorMessage"
        :message="errorMessage"
        type="error"
        show-icon
        class="mb-4"
      />
      <a-divider>订单信息概览</a-divider>
      <a-descriptions bordered size="small" class="mb-4">
        <a-descriptions-item label="订单号">
          {{ orderData.saleId }}
        </a-descriptions-item>
        <a-descriptions-item label="已回款金额">
          {{ orderData.paidAmount }}
          元
        </a-descriptions-item>
        <a-descriptions-item label="主产品">
          {{ orderData.productA.productName }}
        </a-descriptions-item>
        <a-descriptions-item label="总销售">
          {{ orderData.productA.totalSold }} 件
        </a-descriptions-item>
        <a-descriptions-item label="已提货">
          {{ orderData.productA.pickedQty }} 件
        </a-descriptions-item>
        <a-descriptions-item label="未提货">
          {{ orderData.productA.unpickedQty }} 件
        </a-descriptions-item>
        <a-descriptions-item label="单价">
          {{ orderData.productA.unitPrice.toFixed(2) }} 元
        </a-descriptions-item>
        <a-descriptions-item label="已退(提)">
          {{ orderData.productA.alreadyReturnedPickedQty }}
          件
        </a-descriptions-item>
        <a-descriptions-item label="已退(未)">
          {{ orderData.productA.alreadyReturnedUnpickedQty }}
          件
        </a-descriptions-item>
      </a-descriptions>

      <a-divider>退款设置</a-divider>
      <a-row :gutter="16">
        <a-col :span="8">
          <a-form-item label="是否申请退款" name="applyForRefund">
            <a-switch
              v-model:checked="formState.applyForRefund"
              checked-children="是"
              un-checked-children="否"
            />
          </a-form-item>
        </a-col>
        <a-col :span="16" v-if="formState.applyForRefund">
          <a-form-item
            label="手动输入退款金额 (元)"
            name="manualRefundAmount"
            :rules="[
              { validator: validateManualRefundAmount, trigger: 'change' },
            ]"
            help="退款金额完全依赖此输入，若不输入则为0。"
          >
            <a-input-number
              v-model:value="formState.manualRefundAmount"
              :min="0"
              :max="orderData.paidAmount"
              :precision="2"
              style="width: 100%"
              placeholder="输入退款金额"
            />
          </a-form-item>
        </a-col>
      </a-row>
      <p v-if="formState.applyForRefund" class="mb-4">
        <strong>最终退款金额: {{ finalRefundAmount.toFixed(2) }} 元</strong>
        <span class="ml-2 text-xs text-gray-500"
          >(不超过已回款 {{ orderData.paidAmount }} 元)</span
        >
      </p>

      <a-divider>主产品退货 ({{ orderData.productA.productName }})</a-divider>
      <a-form-item label="主产品退货方式">
        <a-radio-group
          v-model:value="formState.mainProductReturnType"
          @change="onMainProductReturnTypeChange"
        >
          <a-radio value="none">不退此产品</a-radio>
          <a-radio value="all">退全部可退部分</a-radio>
          <a-radio value="partial">部分退货</a-radio>
        </a-radio-group>
      </a-form-item>

      <div v-if="formState.mainProductReturnType === 'partial'">
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item
              :label="`从【已提货】退 (可退 ${availableMainPickedQty} 件)`"
              name="mainReturnPickedQty"
              :rules="[{ validator: validateMainPickedQty, trigger: 'change' }]"
            >
              <a-input-number
                v-model:value="formState.mainReturnPickedQty"
                :min="0"
                :max="availableMainPickedQty"
                style="width: 100%"
                placeholder="数量"
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item
              :label="`从【未提货】退 (可退 ${availableMainUnpickedQty} 件)`"
              name="mainReturnUnpickedQty"
              :rules="[
                { validator: validateMainUnpickedQty, trigger: 'change' },
              ]"
            >
              <a-input-number
                v-model:value="formState.mainReturnUnpickedQty"
                :min="0"
                :max="availableMainUnpickedQty"
                style="width: 100%"
                placeholder="数量"
              />
            </a-form-item>
          </a-col>
        </a-row>
      </div>
      <div
        v-if="formState.mainProductReturnType === 'all'"
        class="mb-4 text-gray-700"
      >
        将退还 {{ orderData.productA.productName }}: 已提货
        {{ formState.mainReturnPickedQty }} 件, 未提货
        {{ formState.mainReturnUnpickedQty }} 件.
      </div>

      <a-divider>赠品退货</a-divider>
      <a-form-item label="是否需要退赠品">
        <a-switch v-model:checked="formState.returnAnyGift" />
      </a-form-item>

      <div
        v-if="
          formState.returnAnyGift &&
          orderData.gifts &&
          orderData.gifts.length > 0
        "
      >
        <div
          v-for="gift in orderData.gifts"
          :key="gift.giftId"
          class="mb-4 rounded border p-3"
        >
          <a-checkbox
            v-model:checked="
              formState.returnedGiftQuantities[gift.giftId].returnThisGift
            "
            @change="() => onToggleReturnThisGift(gift.giftId)"
            :disabled="
              getAvailableGiftPickedQty(gift.giftId) === 0 &&
              getAvailableGiftUnpickedQty(gift.giftId) === 0
            "
          >
            选择退此赠品: <strong>{{ gift.giftName }}</strong>
            <span
              class="ml-1 text-xs text-gray-500"
              v-if="
                getAvailableGiftPickedQty(gift.giftId) === 0 &&
                getAvailableGiftUnpickedQty(gift.giftId) === 0
              "
            >
              (已全部退完或无库存可退)
            </span>
          </a-checkbox>

          <div
            v-if="formState.returnedGiftQuantities[gift.giftId]?.returnThisGift"
            class="mt-2"
          >
            <p class="text-xs text-gray-600">
              {{ gift.giftName }} - 总赠送:{{ gift.totalGiven }}, 已提:{{
                gift.pickedQty
              }}(已退:{{ gift.alreadyReturnedPickedQty }}), 未提:{{
                gift.unpickedQty
              }}(已退:{{ gift.alreadyReturnedUnpickedQty }})
            </p>
            <a-row :gutter="16" class="mt-1">
              <a-col :span="12">
                <a-form-item
                  :label="`从【已提货】退 (可退 ${getAvailableGiftPickedQty(gift.giftId)} 件)`"
                  :name="['returnedGiftQuantities', gift.giftId, 'pickedQty']"
                  :rules="[
                    {
                      validator: validateGiftItemPickedQty(gift.giftId),
                      trigger: 'change',
                    },
                  ]"
                >
                  <a-input-number
                    v-model:value="
                      formState.returnedGiftQuantities[gift.giftId].pickedQty
                    "
                    :min="0"
                    :max="getAvailableGiftPickedQty(gift.giftId)"
                    style="width: 100%"
                    placeholder="数量"
                    :disabled="getAvailableGiftPickedQty(gift.giftId) === 0"
                  />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item
                  :label="`从【未提货】退 (可退 ${getAvailableGiftUnpickedQty(gift.giftId)} 件)`"
                  :name="['returnedGiftQuantities', gift.giftId, 'unpickedQty']"
                  :rules="[
                    {
                      validator: validateGiftItemUnpickedQty(gift.giftId),
                      trigger: 'change',
                    },
                  ]"
                >
                  <a-input-number
                    v-model:value="
                      formState.returnedGiftQuantities[gift.giftId].unpickedQty
                    "
                    :min="0"
                    :max="getAvailableGiftUnpickedQty(gift.giftId)"
                    style="width: 100%"
                    placeholder="数量"
                    :disabled="getAvailableGiftUnpickedQty(gift.giftId) === 0"
                  />
                </a-form-item>
              </a-col>
            </a-row>
          </div>
        </div>
      </div>
      <div
        v-else-if="
          formState.returnAnyGift &&
          (!orderData.gifts || orderData.gifts.length === 0)
        "
        class="text-gray-500"
      >
        此订单没有可退的赠品。
      </div>

      <a-form-item
        label="退货/退款原因"
        name="reasonCode"
        :rules="[{ required: true, message: '请选择原因' }]"
      >
        <a-select v-model:value="formState.reasonCode" placeholder="请选择原因">
          <a-select-option value="PRODUCT_DAMAGED">商品损坏</a-select-option>
          <a-select-option value="7_DAYS_NO_REASON">7天无理由</a-select-option>
          <a-select-option value="OTHER">其他</a-select-option>
        </a-select>
      </a-form-item>

      <a-form-item label="详细描述" name="description">
        <a-textarea
          v-model:value="formState.description"
          :rows="3"
          placeholder="详细描述原因"
        />
      </a-form-item>
    </a-form>
    <template #footer>
      <a-button @click="handleCancel">取消</a-button>
      <a-button type="primary" :loading="loading" @click="handleOk">
        提交申请
      </a-button>
    </template>
  </a-modal>
</template>

<style scoped>
.mb-4 {
  margin-bottom: 1rem;
}

.mb-2 {
  margin-bottom: 0.5rem;
}

.mt-1 {
  margin-top: 0.25rem;
}

.mt-2 {
  margin-top: 0.5rem;
}

.ml-1 {
  margin-left: 0.25rem;
}

.ml-2 {
  margin-left: 0.5rem;
}

.p-3 {
  padding: 0.75rem;
}

.border {
  border: 1px solid #d9d9d9;
}

/* Ant Design's default border color */
.rounded {
  border-radius: 4px;
}

/* Example border radius */
.text-xs {
  font-size: 0.75rem;
}

.text-sm {
  font-size: 0.875rem;
}

.text-gray-500 {
  color: #6b7280;
}

.text-gray-600 {
  color: #4b5563;
}

.text-gray-700 {
  color: #374151;
}

:deep(.sale-order-return-modal .ant-modal-body) {
  max-height: calc(80vh - 120px);
  overflow-y: auto;
}
</style>
